<template>
    <div class="bigdata-box">
        <lead />
        <main class="main">
            <div class="head-nav clear">
                <div class="el-menu-data fl">
                    <el-menu class="el-menu-demo" :default-active="dataIndex" mode="horizontal" @select="menuTab">
                        <el-menu-item index="1">
                            <router-link to="/bigdata">首页</router-link>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <router-link to="/bigdata/users">用户</router-link>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <router-link to="/bigdata/resource">资源</router-link>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <router-link to="/bigdata/app">应用</router-link>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <router-link to="/bigdata/activities">教研活动</router-link>
                        </el-menu-item>
                    </el-menu>
                </div>
                <div class="select-school fr">
                    <template>
                        <el-select v-model="platformId" placeholder="请选择学校">
                            <el-option v-for="item in platformData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </template>
                </div>
            </div>
            <router-view :platformId='platformId'/>
        </main>
        <foote />
    </div>
</template>
<script>
import lead from "./head";
import foote from "./footer";

export default {
    components: {
        lead,
        foote
    },
    data() {
        return {
            dataIndex: "1",
            platformData:[],//平台数据
            platformId: "",//平台id
        };
    },
    created() {
        this.dataIndex = is_empty(sessionStorage.getItem("dataIndex"))
            ? "1"
            : sessionStorage.getItem("dataIndex");
    },
    mounted(){
      this.getPlatform();
    },
    methods: {
        menuTab(inx, inx_path) {
            this.dataIndex = inx + "";
            sessionStorage.setItem("dataIndex", inx + "");
        },
        // 获取平台数据
        getPlatform() {
            let success = res => {
                this.platformData=res.data;
                if(!is_empty(res.data)){
                  this.platformId=res.data[0].id;
                }
            };
            this.$ajax.get("api/bigdata/subplatform", {
                params: {},
                func: { success: success }
            });
        },

    }
};
</script>
<style lang="scss">
.bigdata-box {
    background: url("../../../assets/images/bgimg.png") 0 0 repeat #00172b;
}
.main {
    box-sizing: border-box;
    max-width: 1920px;
    min-height: calc(100vh - 90px);
    padding: 0 28px 10px;
    margin: 0 auto;
}
.el-menu-data {
    display: inline-block;
    .el-menu.el-menu--horizontal {
        border-bottom: none;
        background-color: transparent;
        .el-menu-item {
            margin-right: 48px;
            text-align: center;
            padding: 0;
            height: 40px;
            line-height: 40px;
            border-bottom: none;
            font-size: 20px;
            font-weight: bold;
            color: rgba(112, 132, 188, 1);
            background-color: transparent;
        }
        .el-menu-item:hover {
            background-color: transparent;
            color: rgba(112, 132, 188, 1);
        }
        .el-menu-item.is-active {
            font-weight: 600;
            border-bottom: none;
            color: #08dbff;
            border-bottom-color: transparent;
            background-color: transparent;
        }
        .el-menu-item a {
            display: block;
        }
    }
}
.select-school {
    .el-select {
        min-width: 100px;
        .el-input__inner {
            color: #6f82ba;
            font-size: 16px;
            font-weight:bold;
            background-color: transparent;
            border: none;
            text-align: end;
        }
        .el-input .el-select__caret {
            color: #6f82ba;
        }
        .el-icon-arrow-up:before {
            content: "\E78F";
        }
    }
}
.el-select-dropdown.el-popper {
    border: 1px solid #a6c7ff;
    border-radius: 0;
    background-color: #a6c7ff;
    // min-width: 100px;
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #a6c7ff;
    }
    .el-select-dropdown__item.selected {
        color: #16294e;
    }
    .el-select-dropdown__item {
        color: #7083bb;
            // font-size: 16px;
    }
    .popper__arrow {
        display: none;
    }
}
@import "../../../assets/css/bigdata.scss";
</style>